import React,{Component} from 'react';
import {
    Image,

} from 'react-native';
import {MAINCOLOR} from './config'

/*
    pages
 */
 // 首页
import HomePage from './pages/Home/HomePage'                        // 首页
import HomeDetailPage from  './pages/Home/HomeDetailPage'           // 详情

// 我的
import MyPage from  './pages/My/MyPage'                             // 首页
import MyDetailPage from './pages/My/MyDetailPage'                   // 详情

// 测试
import TestPage from './pages/Test/TestPage'                        // 首页
import TestDetailPage from './pages/Test/TestDetailPage'            // 详情

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
const HomeTabSelectedIcon = require("./img/tab_shop_p.png");
const HomeTabUnSelectedIcon = require("./img/tab_shop.png");
const TestTabSelectedIcon = require("./img/tab_find_p.png");
const TestTabUnSelectedIcon = require("./img/tab_find.png");
const MyTabSelectedIcon = require("./img/tab_user_p.png");
const MyTabUnSelectedIcon = require("./img/tab_user.png");

export default class RootPage extends Component {

    render() {
        return (
            <NavigationContainer>
                <Tab.Navigator
                    screenOptions={({ route }) => ({
                        tabBarVisible: true,
                        tabBarIcon: ({ focused, color, size }) => {
                            let iconName;
                            if (route.name === '首页') {
                                iconName = focused ? HomeTabSelectedIcon :HomeTabUnSelectedIcon;
                            } else if (route.name === '测试') {
                                iconName = focused ? TestTabSelectedIcon :TestTabUnSelectedIcon;
                            } else if (route.name === '我的') {
                                iconName = focused ? MyTabSelectedIcon : MyTabUnSelectedIcon;
                            }
                            return <Image source={iconName}/>
                        },
                    })}
                    tabBarOptions={{
                        
                        activeTintColor: MAINCOLOR,
                        inactiveTintColor: 'gray',
                        tabStyle : {
                            backgroundColor: '#fff',
                            paddingBottom: 7,
                            borderRightWidth: 1,
                            borderRightColor: '#fff'
                        },
                    }}
                >
                    <Tab.Screen name="首页" component={MainScreen}  />
                    <Tab.Screen name="测试" component={TestScreen} />
                    <Tab.Screen name="我的" component={MyScreen}   />
                </Tab.Navigator>

            </NavigationContainer>
        )
    }




}
const  MainScreen = () =>{
    return(
        <Stack.Navigator>
            <Stack.Screen name="首页" component={HomePage} />
            <Stack.Screen name="HomeDetailPage" component={HomeDetailPage}  options={{ headerShown: false , tabBarVisible:false}}/>
        </Stack.Navigator>
    )
}
const  TestScreen = () =>{
    return(
        <Stack.Navigator>
            <Stack.Screen name="测试" component={TestPage} />
            <Stack.Screen name="TestDetailPage" component={TestDetailPage} options={{ headerShown: false }}/>
        </Stack.Navigator>
    )
}
const  MyScreen = () =>{
    return(
        <Stack.Navigator>
            <Stack.Screen name="我的" component={MyPage}  />
            <Stack.Screen name="MyDetailPage" component={MyDetailPage}  screenOptions={({ route }) => ({
                        tabBarVisible: false,
                       
                    })}  options={{ headerShown: false ,tabBarVisible:false}}/>
        </Stack.Navigator>
    )
}



